<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<style type="text/css">
	.flo2{
		width: 458px;
	}
</style>
<body>
	<div class="flo1">
        <input type="text" name="makeupCo" id="makeupCo" class="makeinp text"; onfocus="setfocus(this)" oninput="setinput(this);" placeholder="请选择或输入" style="width: 342px;height: 21px;">
    </div>
    <div class="flo2" >
        <select name="makeupCoSe" id="typenum" class="name" onchange="changeF(this)" style="position: relative;left: 2px;z-index: 2147483647;width: 346px;height: 142px;cursor: pointer;margin-left: -0.5%;" size="10">
        </select>
    </div>
</body>
<script type="text/javascript">
	//生成option
	var arr_data=['杨兆敏','赵艳萍','不为秀','陈天荣','黄津津','陈蕙馨','张翠云','何涛','金宏康','辛铖','刘邓炫','王悦','陈慌',111,'陈晨','张天伟'];
//模糊查询
        var TempArr = [];//存储option
        var TempArr2 = [];//存储option
        $(function () {
        	//名家入驻
            for(var i in arr_data){
                    $("#typenum").append("<option id="+i+">"+arr_data[i]+"</option>");
                    // 有值给panduan赋1
                    panduan=1;
            }
            //循环将option所有值以及id放入数组中
            $('#typenum').css('display', 'none');  //select隐藏
            /*先将数据存入数组*/
            $("#typenum option").each(function (index, el) {
                TempArr[index] = [$(this).text(), $(this).attr('id')];
            });
        });
        //select改变时触发
        function changeF(this_) {
            $('#makeupCo').val($(this_).find("option:selected").text());  //input的值就等于select的值
            $('#makeupCo').attr('data-department-id', $(this_).find("option:selected").attr('id'));
            $("#typenum").css({"display": "none"});
        }
        //onfocus 事件是得到焦点时触发
        function setfocus(this_) {
            $("#typenum").empty();
            $("#typenum").css({"display": ""}); //将select隐藏
            var select = $("#typenum");
            for (i = 0; i < TempArr.length; i++) {
                var option = $('<option id="' + TempArr[i][1] + '"></option>').text(TempArr[i][0]);
                select.append(option);
            }
        }
        //oninput 事件在用户输入时触发。
        function setinput(this_) {
            var select = $("#typenum");
            $('#makeupCo').attr('data-department-id',"none");
            select.html("");
            for (i = 0; i < TempArr.length; i++) {
                //若找到以txt的内容开头的，添option
                if (TempArr[i][0].substring(0, TempArr[i][0].length).indexOf(this_.value) != -1) {
                    var option = $('<option id="' + TempArr[i][1] + '"></option>').text(TempArr[i][0]);
                    select.append(option);
                    if (select.children()[0].innerHTML == this_.value) {
                        $('#makeupCo').val(this_.value);
                        $('#makeupCo').attr('data-department-id', select.children()[0].id);
                    } else {
                        $('#makeupCo').attr('data-department-id', 'none');
                    }
                }
            }
        }

        $(document).bind('click', function (e) {
            var e = e || window.event; //浏览器兼容性
            var elem = e.target || e.srcElement;
            while (elem) { //循环判断至跟节点，防止点击的是div子元素
                if (elem.id && (elem.id == 'typenum' || elem.id == "makeupCo")) {
                    return;
                }
                elem = elem.parentNode;
            }
            $('#typenum').css('display', 'none'); //点击的不是div或其子元素
        });
</script>
</html>